<template>
	<view>
		<image src="/static/home.png" mode="widthFix" class="image posiab"></image>
		<view class="con" :style="{paddingTop:shh+'px'}">
			<view class="flex-ju-b pt40">
				<image src="/static/hbox.png" mode="widthFix" class="image width64"></image>
				<input v-model="key"  @confirm="conint" confirm-type="search" class="flex1 border000 pg10 ml50 mr20 ra40 center" />
				<image @click="conint" src="/static/sou.png" mode="widthFix" class="image width45"></image>
			</view>
		</view>
		<view class="con">
			<scroll-view class="father" scroll-x>
					<view class="flex-a-i mt30 size28">
						<view @click="tabm(index)"
						 :style="{color:theme&tabIndex == index?'#fff':''}"
						 :class="tabIndex == index ? 'active' :''" class="mr30 bot color999 pb10"
							v-for="(item,index) in categoryList" :key="index">
							{{item.title}}
						</view>
					</view>
				</scroll-view>
				
				
			</view>
		</view>
		<view class="con mt25 size26 mb20 posire">
			<view v-if="isdata" class="flex-ju-c mt8vh">
				<view class="flex-ju-c flex-col">
					<image mode="widthFix" class="width210 ra20" src="/static/nodata.png"></image>
					<view class=" size24">这里什么也没有~</view>
				</view>
			</view>
			
			<view v-for="(item,index) in list" @click="tapitems(item)" :key="index"  class="borderE1E1E1 bgfff mt20 pg20 ra20">
				<view class="flex-a-i">
					<view>
						<image class="wh260-160 ra20" :src="item.thumb"></image>
					</view>
					<view class="ml20 flex1">
						<view class="two bold size26">{{item.title}}</view>
						<view class="flex-a-i size22 mt20">
							<view class="wh111-30 ra30 ml-10 flex-ju-c pg3" :class="theme?'colorFF6E44 borderFF6E44':'border000'">
								{{item.category.title}}
							</view>
							<view style="white-space: nowrap;" class="color999 ml10 size26 flex-a-i">{{item.updated_at}}</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
</template>

<script>
	export default {
		data() {
			return {
				key:"",
				tabIndex:0,
				theme:'',
				categoryList:[],
				page:1,
				list:[],
				isdata:false,
				hidden:uni.getStorageSync('hidden')
			}
		},
		onShow() {
			this.theme=uni.getStorageSync('theme')
			 
		},
		mounted() {
			 // this.$refs.showRight.open();
			 if(uni.getStorageSync('theme')){
			 	uni.setTabBarStyle({
			 		backgroundColor:"#292929",
			 		color:"#A19996",
			 		selectedColor:"#FFFFFF"
			 	})
			 }else{
			 	uni.setTabBarStyle({
			 		backgroundColor:"#ffffff",
			 		color:"#A19996",
			 		selectedColor:"#000000"
			 	})
			 }
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		onPullDownRefresh(){
			this.page=1
			this.list=[]
			this.init()
		},
		onLoad() {
			this.init()
		},
		methods: {
			init(){
				this.http('announcement/category').then(res => {
					this.categoryList=res.data
					this.getList()
				})
				if(this.hidden == 1){
					uni.setTabBarItem({
					     index: 1,
					     visible: false
					})
					
					uni.setTabBarItem({
					     index: 2,
					     visible: false
					})
					
				}
			},
			conint(){
				this.page=1
				this.list=[]
				this.getList()
			},
			tapitems(item) {
					uni.navigateTo({
						url: 'detail?uuid=' + item.uuid
					})
				},
			getList(){
				this.http('announcement', {
					category_id: this.categoryList[this.tabIndex].id,
					page:this.page,
					search:this.key,
					per_page:200
				}).then(res => {
					
					this.list = [...this.list,...res.data]
					if(this.list.length){
						this.isdata = false
					}else{
						this.isdata = true
					}
					uni.stopPullDownRefresh()
				})
			},
			tabm(index) {
				this.tabIndex = index
				this.page=1
				this.list = []
				this.getList()
			},
		}
	}
</script>

<style>

	.bot {
		white-space: nowrap;
	}
	/deep/::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
	.line{
		margin: auto;
		margin-top:3px;
		width: 47rpx;
		height: 7rpx;
	}
	.lactice{
		background: linear-gradient(0deg, #FF6E44, #FFA453, #FFDC7F);
	}
	.active{
		color:#000;
		font-weight: bold;
	}
</style>
